import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import '../controls/login_form_controller.dart';
import '../controls/login_animation_controller.dart';

class LoginFormWidget extends StatelessWidget {
  final LoginFormController formController;
  final LoginAnimationController animationController;
  final bool isLargeScreen;

  const LoginFormWidget({
    super.key,
    required this.formController,
    required this.animationController,
    required this.isLargeScreen,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.symmetric(
            horizontal: isLargeScreen ? 80 : 24,
            vertical: 24,
          ),
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minHeight: MediaQuery.of(context).size.height - 48,
            ),
            child: Form(
              key: formController.formKey,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  if (!isLargeScreen) ...[
                    Center(
                      child: FadeTransition(
                        opacity: animationController.fadeAnimation,
                        child: Directionality(
                          textDirection: TextDirection.rtl,
                          child: AnimatedTextKit(
                            animatedTexts: [
                              TypewriterAnimatedText(
                                'تىجارەت ياردەمچىسى',
                                textStyle: const TextStyle(
                                  fontSize: 28,
                                  fontWeight: FontWeight.bold,
                                  color: Color(0xFF1E3A8A),
                                ),
                                speed: const Duration(milliseconds: 150),
                                cursor: '|',
                              ),
                            ],
                            totalRepeatCount: 1,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 32),
                  ],
                  Center(
                    child: Transform.translate(
                      offset: Offset(0, animationController.floatingOffset),
                      child: ScaleTransition(
                        scale: animationController.scaleAnimation,
                        child: Container(
                          width: 120,
                          height: 120,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(20),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.blue.withOpacity(0.2),
                                blurRadius: 20,
                                offset: const Offset(0, 10),
                              ),
                            ],
                          ),
                          child: RotationTransition(
                            turns: animationController.iconRotationAnimation,
                            child: const Icon(
                              Icons.store,
                              size: 60,
                              color: Color(0xFF10B981),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(height: 32),
                  FadeTransition(
                    opacity: animationController.fadeAnimation,
                    child: const Center(
                      child: Text(
                        'سىستېمىغا خۇش كەلدىڭىز',
                        style: TextStyle(
                          fontSize: 20,
                          color: Color(0xFF065F46),
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(height: 32),
                  // Username field
                  SlideTransition(
                    position: animationController.slideAnimation,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(12),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey.withOpacity(0.1),
                            blurRadius: 10,
                            offset: const Offset(0, 5),
                          ),
                        ],
                      ),
                      child: TextFormField(
                        controller: formController.usernameController,
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return 'ئىشلەتكۈچى نامىنى كىرگۈزۈڭ';
                          }
                          return null;
                        },
                        decoration: InputDecoration(
                          labelText: 'ئىشلەتكۈچى نامى',
                          prefixIcon: const Icon(Icons.person_outline),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide.none,
                          ),
                          filled: true,
                          fillColor: Colors.white,
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(height: 16),
                  // Password field
                  SlideTransition(
                    position: animationController.slideAnimation,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(12),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey.withOpacity(0.1),
                            blurRadius: 10,
                            offset: const Offset(0, 5),
                          ),
                        ],
                      ),
                      child: TextFormField(
                        controller: formController.passwordController,
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return 'پارولنى كىرگۈزۈڭ';
                          }
                          return null;
                        },
                        obscureText: formController.obscurePassword,
                        decoration: InputDecoration(
                          labelText: 'پارول',
                          prefixIcon: const Icon(Icons.lock_outline),
                          suffixIcon: IconButton(
                            icon: Icon(
                              formController.obscurePassword
                                  ? Icons.visibility_outlined
                                  : Icons.visibility_off_outlined,
                            ),
                            onPressed: formController.togglePasswordVisibility,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide.none,
                          ),
                          filled: true,
                          fillColor: Colors.white,
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(height: 16),
                  // Remember me and forgot password
                  SlideTransition(
                    position: animationController.slideAnimation,
                    child: Row(
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(8),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.1),
                                blurRadius: 5,
                                offset: const Offset(0, 2),
                              ),
                            ],
                          ),
                          child: Row(
                            children: [
                              Checkbox(
                                value: formController.rememberMe,
                                onChanged: formController.toggleRememberMe,
                              ),
                              const Text(
                                'مېنى ئەستە تۇت',
                                style: TextStyle(
                                  color: Color(0xFF065F46),
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ],
                          ),
                        ),
                        const Spacer(),
                        TextButton(
                          onPressed: () {},
                          style: TextButton.styleFrom(
                            foregroundColor: const Color(0xFF10B981),
                            padding: const EdgeInsets.symmetric(
                              horizontal: 16,
                              vertical: 8,
                            ),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8),
                            ),
                          ),
                          child: const Text(
                            'پارول ئۇنتۇلغان؟',
                            style: TextStyle(
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 24),
                  // Login button
                  SlideTransition(
                    position: animationController.slideAnimation,
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        boxShadow: [
                          BoxShadow(
                            color: const Color(0xFF1D4ED8).withOpacity(0.3),
                            blurRadius: 15,
                            offset: const Offset(0, 5),
                          ),
                        ],
                      ),
                      child: ElevatedButton(
                        onPressed: formController.isLoading
                            ? null
                            : () => formController.handleLogin(context),
                        style: ElevatedButton.styleFrom(
                          padding: const EdgeInsets.symmetric(vertical: 16),
                          backgroundColor: const Color(0xFF10B981),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12),
                          ),
                        ),
                        child: formController.isLoading
                            ? Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  SizedBox(
                                    width: 24,
                                    height: 24,
                                    child: CircularProgressIndicator(
                                      color: Colors.white.withOpacity(0.8),
                                      strokeWidth: 3,
                                    ),
                                  ),
                                  const SizedBox(width: 12),
                                  const Text(
                                    'كىرىۋاتىدۇ...',
                                    style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold,
                                      color: Color(0xFF065F46),
                                    ),
                                  ),
                                ],
                              )
                            : const Text(
                                'كىرىش',
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold,
                                  color: Color(0xFF065F46),
                                ),
                              ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
} 